<template>
	<div id="goodsEdit">
		<!-- 商品编辑 -->
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<div class="moudel">
				<h3>商品介绍</h3>

				<el-form-item label="商品ID">
					<el-input v-model="ruleForm.id" disabled></el-input>
				</el-form-item>
				<el-form-item label="商品名称">
					<el-input v-model="ruleForm.name" disabled></el-input>
				</el-form-item>
				<el-form-item label="商品编号">
					<el-input v-model="ruleForm.name" disabled></el-input>
				</el-form-item>
				<el-form-item label="市场售价">
					<el-input v-model="ruleForm.name" disabled></el-input>
				</el-form-item>
				<el-form-item label="是否新品">
					<el-input v-model="ruleForm.isNew" disabled></el-input>
				</el-form-item>
				<el-form-item label="是否热卖">
					<el-input v-model="ruleForm.isNew" disabled></el-input>
				</el-form-item>
				<el-form-item label="是否在售">
					<el-input v-model="ruleForm.isNew" disabled></el-input>
				</el-form-item>
				<el-form-item label="商品图片">
					<el-upload class="avatar-uploader" :headers="tokens"
						action="http://192.168.1.54:8080/admin/storage/create" :show-file-list="false"
						:on-success="handleAvatarSuccess">
						<img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>

					</el-upload>
				</el-form-item>

				<el-form-item label="市场售价">
					<!-- :on-success="handleAvatarSuccess2" -->
					<el-upload class="upload-demo" action="http://192.168.1.54:8080/admin/storage/create"
						:headers="tokens" list-type="picture-card" :file-list="fileList" :on-remove="handleRemove"
						:on-success="handleAvatarSuccess2">
						<template v-for="item in fileList">
							<img :src="item.response.data.url" class="pic2" />
						</template>
						<i class="el-icon-plus"></i>
					</el-upload>


				</el-form-item>

				<el-form-item label="商品单位">
					<el-input v-model="ruleForm.unit"></el-input>
				</el-form-item>
				<el-form-item label="关键字">
					<template>
						<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
							@close="handleClose(tag)">
							{{tag}}
						</el-tag>
						<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput"
							size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
						</el-input>
						<el-button v-else class="button-new-tag" type="primary" size="small" @click="showInput">+ 新增
						</el-button>
					</template>

				</el-form-item>

				<el-form-item label="所属分类">
					<div class="blocks">
						<el-cascader v-model="value" clearable :options="options" :props="{ expandTrigger: 'hover' }"
							@change="handleChange"></el-cascader>
					</div>

				</el-form-item>

				<el-form-item label="所属品牌商">
					<template>
						<el-select v-model="value2" placeholder="请选择" clearable>

							<el-option v-for="item in options2" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</template>
				</el-form-item>

				<el-form-item label="商品简介">
					<el-input v-model="desc"></el-input>
				</el-form-item>
				<el-form-item label="商品详细介绍" style="height: 437px;">
					<myeditor v-model="ruleForm.content" :init="editorInit"></myeditor>

				</el-form-item>

			</div>

			<!-- 商品规格 -->
			<div class="moudel">
				<h3>商品规格</h3>
				<el-radio-group v-model="radio4" class="rdg">
					<el-radio-button label="0">默认标准规格</el-radio-button>
					<el-radio-button label="1">多规格支持</el-radio-button>
				</el-radio-group>
				<el-button type="primary" plain v-if="radio4=='1'" @click="setpecs">新增</el-button>
				<template v-if="radio4=='0'">
					<el-table :data="tableData" style="width: 100%;margin-left: 20px;" :border="true"
						:header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
						<el-table-column label="规格名" width="180">
							规格
						</el-table-column>
						<el-table-column label="规格值" width="180">
							<el-tag>标准</el-tag>
						</el-table-column>
						<el-table-column label="规格图片">
						</el-table-column>
					</el-table>
				</template>
				<template v-if="radio4=='1'">
					<el-table :data="tableData2" style="width: 100%;margin-left: 20px;" :border="true"
						:header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}">
						<el-table-column prop="date" label="规格名" width="180">
						</el-table-column>
						<el-table-column prop="name" label="规格值" width="180">
						</el-table-column>
						<el-table-column prop="address" label="规格图片">
							<template slot-scope="scope">
								<img class="pic" />
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除
								</el-button>
							</template>

						</el-table-column>
					</el-table>
				</template>
			</div>
			<template>
				<!-- 设置规格 -->
				<el-dialog title="设置规格" :visible.sync="dialogVisible2" width="50%">
					<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px"
						class="demo-ruleForm">
						<el-form-item label="规格名">
							<el-input v-model="ruleForm2.name" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="规格值">
							<el-input v-model="ruleForm2.value" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="规格图片">
							<el-upload class="avatar-uploader" :headers="tokens"
								action="http://192.168.1.54:8080/admin/storage/create" :show-file-list="false"
								:on-success="handleAvatarSuccess3">
								<img v-if="ruleForm2.imageUrl" :src="ruleForm2.imageUrl" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>

						</el-form-item>
					</el-form>

					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible2 = false">取 消</el-button>
						<el-button type="primary" @click="addTable2">确 定</el-button>
					</span>
				</el-dialog>

			</template>

			<div class="moudel">
				<h3>
					商品库存
				</h3>
				<template>
					<el-table :data="tableData3" style="width: 100%">
						<el-table-column label="货品规格" width="500px">
							<template slot-scope="scope">
								<el-tag>{{scope.row.tag?'标准':'非标准'}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="price" label="货品售价">

						</el-table-column>
						<el-table-column prop="num" label="货品数量">
						</el-table-column>
						<el-table-column label="货品图片">
							<template slot-scope="scope">
								<img class="pic2" />
							</template>
						</el-table-column>
						<el-table-column label="操作" width="180">
							<el-button type="primary" @click="setStorage">设置</el-button>
						</el-table-column>

					</el-table>
				</template>



			</div>

			<template>
				<!--弹框四 -->
				<!-- 设置库存 -->
				<el-dialog title="添加规格" :visible.sync="dialogVisible3" width="50%">
					<el-form :model="ruleForm3" status-icon ref="ruleForm3" label-width="100px" class="demo-ruleForm">
						<el-form-item label="货品售价">
							<el-input v-model="ruleForm3.price" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="货品数量">
							<el-input v-model="ruleForm3.num" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="货品图片">
							<el-upload class="avatar-uploader" :headers="tokens"
								action="http://192.168.1.54:8080/admin/storage/create" :show-file-list="false"
								:on-success="handleAvatarSuccess4">
								<img v-if="ruleForm3.imageUrl" :src="ruleForm3.imageUrl" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>

						</el-form-item>
					</el-form>

					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible2 = false">取 消</el-button>
						<el-button type="primary" @click="addTable2">确 定</el-button>
					</span>
				</el-dialog>

			</template>

			<div class="moudel">
				<!-- 商品参数 -->
				<h3>商品参数</h3>
				<el-button type="primary" @click="addParams">
					添加
				</el-button>
				<template>
					<el-table :data="tableData4" style="width: 100%">
						<el-table-column prop="date" label="商品参数名称">
						</el-table-column>
						<el-table-column label="商品参数值">
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" type="danger" @click="handleDelete2(scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
			<template>
				<el-dialog title="添加商品参数" :visible.sync="dialogVisible4" width="50%">
					<el-form :model="ruleForm4" ref="ruleForm4" label-width="100px" class="demo-ruleForm">
						<el-form-item label="商品参数名称">
							<el-input v-model="ruleForm4.name"></el-input>
						</el-form-item>
						<el-form-item label="商品参数值">
							<el-input v-model="ruleForm4.params"></el-input>
						</el-form-item>
					</el-form>
					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible4 = false">取 消</el-button>
						<el-button type="primary" @click="dialogVisible4 = false">确 定</el-button>
					</span>
				</el-dialog>

			</template>

			<el-form-item>
				<el-button type="primary">取消</el-button>
				<el-button @click="submitForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>


	</div>
</template>

<script>
	import Editor from "@tinymce/tinymce-vue";
	export default {
		components: {
			myeditor: Editor
		},
		data() {
			return {
				ruleForm: {
					// 商品id
					id: '',
					// 商品名称
					name: '',
					// 商品编号
					goodsSn: '',
					// 市场售价
					counterPrice: '',
					// 是否新品
					isNew: '',
					// 是否热卖
					isHot: '',
					// 是否在售
					isOnSale: '',
					// 商品图片
					imageUrl: '',
					// 多个列表的图片
					gallery: [],
					// 单位
					unit: '',
					// 关键字
					keywords: '',

				},
				rules: {

				},
				// 图片列表的值
				fileList: [],
				// 图片的token值
				tokens: {
					"X-Litemall-Admin-Token": this.Cookies.get('token')
				},
				// 新增关键字的主要参数
				// 结果展示列表
				dynamicTags: ['标签一', '标签二', '标签三'],
				// 输入框是否显示
				inputVisible: false,
				// 输入框里面的值
				inputValue: '',
				// 这个是选择的值
				value: [],
				// 级联选择器的数据渲染
				options: [],
				// 下拉框的样式
				options2: [],
				// 选择的值
				value2: '',
				// 商品简介
				desc: '',
				// 富文本编辑
				editorInit: {
					language_url: '/tinymce/lang/zh_CN.js',
					language: 'zh_CN',
					height: 400,
					width: 700,
					skin_url: '/tinymce/skins/ui/oxide', // skin路径
					convert_urls: false,
					plugins: [
						'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
					],
					toolbar: [
						'searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample',
						'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
					],
					images_upload_handler: function(blobInfo, success, failure) {
						const formData = new FormData();
						formData.append('file', blobInfo.blob());
						createStorage(formData)
							.then(res => {
								success(res.data.data.url);
							})
							.catch(() => {
								failure('上传失败，请重新上传');
							});
					}
				},
				// 商品规格里面的单选按钮
				radio4: '0',
				// 表格数据
				tableData: [],
				// 表格数据2
				// 第二个表格
				tableData2: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}],
				// 是否展示哪个？
				isShow: true,
				// 是否进行显示
				dialogVisible2: false,
				ruleForm2: {
					// 规格名
					name: '',
					// 规格值
					value: '',
					// 规格图片
					imageUrl: '',
				},
				rules2: {
					// 规则的处理
				},
				// 商品库存的第一个table
				tableData3: [],
				ruleForm3: {
					// 第三个的数据
					// 货品规格
					tag: true,
					// 价格
					price: 0,
					// 数量
					num: 0,
					// 货品图片
					imageUrl: ''

				},
				// 弹框进行显示
				dialogVisible3: false,
				// 添加商品参数
				dialogVisible4: false,
				// 添加参数
				ruleForm4: {
					// 商品参数名称
					name: '',
					// 商品参数
					params: '',

				},
				// 参数列表
				tableData4: [],







			}
		},
		methods: {
			handleAvatarSuccess(res, file) {
				// this.imageUrl = URL.createObjectURL(file.raw);
				console.log("success???", this.ruleForm.imageUrl)
				console.log("我是file", file)
				// 这里将图片地址上传
				this.ruleForm.imageUrl = file.response.data.url
			},
			handleAvatarSuccess2(res, file, fileList) {
				console.log("我是file2", fileList)
				this.fileList = fileList
				console.log("菜鸡", this.fileList)
			},
			handleAvatarSuccess3(res, file) {
				console.log("我是file3", file)
				// 这里将图片地址上传
				this.ruleForm2.imageUrl = file.response.data.url

			},
			handleAvatarSuccess4() {
				console.log("我是file3", file)
				// 这里将图片地址上传
				this.ruleForm3.imageUrl = file.response.data.url
			},
			handleRemove(file, fileList) {
				// 删除图片
				console.log(file, fileList);
				this.fileList = fileList
			},
			// handlePictureCardPreview(file) {
			// 	// 图片上传回显
			// 	this.dialogImageUrl = file.response.data.url;
			// 	// this.dialogVisible = true;
			// },

			handleClose(tag) {
				// 删除tag标签的方法
				this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
			},
			showInput() {
				// 新增进行数据展示的方法
				this.inputVisible = true;
				this.$nextTick(_ => {
					this.$refs.saveTagInput.$refs.input.focus();
				});

			},

			handleInputConfirm() {
				// 失去焦点的方法
				let inputValue = this.inputValue;
				if (inputValue) {
					this.dynamicTags.push(inputValue);
				}
				this.inputVisible = false;
				this.inputValue = '';
			},

			handleChange(value) {
				// 级联选择器
				console.log(value);
			},
			handleDelete(row) {
				// 删除
				console.log("删除操作", row)
			},
			setpecs() {
				// 设置新的规格
				this.dialogVisible2 = true

			},
			addTable2() {
				// 将数据提交到tabledata2中
				this.dialogVisible2 = false
			},
			setStorage() {
				// 设置库存’
				this.dialogVisible3 = true
			},
			addParams() {
				// 添加参数
				this.dialogVisible4 = true
			},
			handleDelete2(){
				// 进行删除商品参数
				
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
		mounted() {

			// 挂载的时候将值传入进去
			// 将token值进行存储
			// this.tokens["X-Litemall-Admin-Token"] = this.Cookies.get('token')

		},
		// created() {
		// 	this.tokens["X-Litemall-Admin-Token"] = this.Cookies.get('token')
		// }
		computed: {

		},
		watch: {

		}
	}
</script>

<style>
	.moudel {
		box-shadow: 2px 2px 2px 4px #ececec;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 145px;
		height: 145px;
		line-height: 145px;
		text-align: center;
	}

	.avatar {
		width: 145px;
		height: 145px;
		display: block;
	}

	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.button-new-tag {
		margin-left: 10px;
		height: 32px;
		line-height: 30px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.input-new-tag {
		width: 90px;
		margin-left: 10px;
		vertical-align: bottom;
	}

	.rdg {
		width: 50%;
		margin-left: 20px;
	}

	.pic {
		width: 30px;
		height: 30px;
	}
</style>
